<template>
  <div class="layout-warper">
    <div class="nav-wraper">
      <ul class="nav-items clearfix wraper-center">
        <li class="nav-item">
          <a href="/">首页</a>
        </li>
        <li
          v-for="(item, index) in navLst"
          :key="index"
          class="nav-item"
          :class="{active: item.type_pid == typePid}"
        >
          <a :href="`/list?typePid=${item.type_id}`">{{ item.type_name }}</a>
        </li>
      </ul>
    </div>
    <nuxt />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import logoImg from '@/assets/images/1000/logo.png'
export default {
  components: {
  },
  data() {
    return {
      logoImg,
      typePid: ''
    }
  },
  computed: {
    ...mapGetters('nav', [
      'navLst'
    ])
  },
  mounted() {
    this.typePid = this.$route.query.typePid || ''
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layout-warper{
  padding-top: 50px;
  .nav-wraper{
    height: 50px;
    line-height: 50px;
    background-color: #6abf4b;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    .nav-items{
      .nav-item{
        float: left;
        font-size: 16px;
        a{
          color: #fff;
          padding: 0 20px;
          text-decoration: none;
        }
      }
      .nav-item.active,
      .nav-item:hover{
        background-color: #409b1f;
      }
    }
  }
}
</style>
